.home {
    .background-Images {
        background-image: url('../static/w.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 100vh;
        width: 100vw;
        position: absolute;
        z-index: -1;
    }

    .button-position {
        position: fixed;
        right: 50px;
        bottom: 50px;
        z-index: 102;

        .positions {
            width: 120px;
            height: 30px;
            border: none;
            border-radius: 50px;
            color: #00ffff;
            background-color: rgba(0, 73, 186, 0.5);

            box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
            border: 2px solid #0091ff;
        }
    }

    .boxboder.active {
        transform: translate(100%);
        transition: all 0.5s;
    }

    .boxboder {
        transform: translate(0%);
        transition: all 0.5s;

        .boxboder-content {
            width: 1820px;
            height: calc(100% - 100px);
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            margin: auto;
            padding: 50px 0px;

            .left {
                width: calc(365px - 30px);
                height: calc(100% - 4px -10px);
                background-color: skyblue;
                margin-top: 10px;
                background-color: rgba(0, 73, 186, 0.5);
                border: 2px solid #0091ff;
                box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
                padding: 15px;
                color: white;
                transform: translate(-100%);
                transition: all 0.5s;
            }

            .left.active {
                transform: translate(0%);
                transition: all 0.5s;
            }

            .center {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .top {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 50px;
                    color: white;

                    .Btn {
                        text-align: center;
                        width: 210px;
                        // padding: 30px 60px;
                        margin-right: 30px;
                        padding-bottom: 10px;
                    }
                }

                .footer {
                    display: flex;
                    justify-content: space-between;
                    width: 960px;
                    .box {
                        width: calc(50% - 25px - 30px);
                        height: calc(392px - 30px);
                        background-color: skyblue;
                        margin-top: 10px;
                        background-color: rgba(0, 73, 186, 0.5);
                        border: 2px solid #0091ff;
                        box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
                        transform: translate(0%, 100%);
                        transition: all 0.5s;
                        padding: 15px;
                        color: white;

                        .box-item {
                            text-align: center;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;

                            .doors {
                                margin-bottom: 15px;
                                font-size: 14px;
                            }

                            .title {
                                margin-top: 5px;
                            }
                        }
                    }

                    .box.active {
                        transform: translate(0%, 0%);
                        transition: all 0.5s;
                    }
                }
            }

            .right {
                width: calc(365px - 30px);
                height: calc(100% - 4px -10px - 30px);
                background-color: skyblue;
                margin-top: 10px;
                background-color: rgba(0, 73, 186, 0.5);
                border: 2px solid #0091ff;
                box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
                transform: translate(100%);
                transition: all 0.5s;
                padding: 15px;
            }

            .right.active {
                transform: translate(0%);
                transition: all 0.5s;
            }
        }

    }

    .tingchechang {
        color: #ccc;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin: 15px 0px;
    }

    .ticheA {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 100%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheB {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 80%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheC {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 50%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheD {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 60%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheE {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 20%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheF {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 80%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }

    .ticheG {
        border: 1px solid #888888;
        padding: 2px 5px;

        .neiceng {
            width: 100%;
            height: 8px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0%;
                width: 30%; // 40%表达需要渐变的宽度
                height: 100%;
                transform: translateY(-50%);
                background-image: linear-gradient(to right, #115aea, transparent);
            }
        }
    }
}